<template>
  <Transition :duration="{ enter: 2500, leave: 3000 }" :appear>
    <div class="outer" v-if="flag">
      <slot name="prefix" />
      <div class="inner">
        <slot name="content" />
      </div>
    </div>
  </Transition>
</template>

<script setup>
defineProps({
  flag: {
    type: Boolean,
    default: false
  },
  appear: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.outer {
  display: flex;
}
/* 外层 h1 的动画效果 */
.v-enter-from,
.v-leave-to {
  transform: translateX(-100px);
}

.v-enter-to,
.v-leave-from {
  transform: translateX(0px);
}

.v-enter-active,
.v-leave-active {
  transition: transform 1s ease;
}

.v-leave-active {
  transition-delay: 2s;
}

/* 内部(淡入)的动画 */
.v-enter-from .inner,
.v-leave-to .inner {
  opacity: 0;
}

.v-enter-to .inner,
.v-leave-from .inner {
  opacity: 1;
}

.v-enter-active .inner,
.v-leave-active .inner {
  transition: opacity 1.5s ease;
}

.v-enter-active .inner {
  transition-delay: 1s;
}

.v-leave-active .inner {
  transition-delay: 0.5s;
}
</style>
